<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主机管理</title>

    <link rel="stylesheet" href="/static/style/common.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c_table th {
            background-color: rgb(230, 230, 230);
            height: 40px;
            font: 16px/40px "Microsoft YaHei UI";
            font-weight: bold;
        }

        .c_table td {
            height: 40px;
            /*width: 200px;*/
            text-align: center;
            vertical-align: middle;
        }

        .c_table .c_ordinal {
            width: 100px;
        }

        .c_table .c_name {
            width: 200px;
        }

        .c_table .c_address {
            width: 200px;
        }

        .c_table .c_desc {
            width: 200px;
        }

        .c_table .c_addtimer {
            width: 200px;
        }

        .c_table .c_status {
            width: 80px;
        }

        .c_table .c_action {
            width: 120px;
        }

        tr:nth-child(even) {
            background-color: #f5fafe;
        }

        tr:hover {
            background-color: #dafdf3;;
        }

        .c_action_td {
            width: 100px;
        }

        /*普通按钮样式一*/
        .c_action_button_sty_disenabled {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            /*background-color: rgb(200, 200, 200);*/
            border: 1px solid lightpink;
            color: rgb(55, 101, 124);
            outline: none;
        }

        .c_action_button_sty {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            background-color: rgb(200, 200, 200);
            border: 1px solid rgb(239, 240, 242);
            color: rgb(55, 101, 124);
            outline: none;
        }

        /*普通按钮样式一 hover*/
        .c_action_button_sty:hover {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            background-color: rgb(156, 183, 202);
            border: 1px solid rgb(239, 240, 242);
            color: rgb(55, 101, 124);
            outline: none;
        }

    </style>


    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".c_action_button_dele").click(function (event) {
                // 点击删除按钮

                var messInfo = '是否删除( ' + this.name + ' )该主机？';
                var result = confirm(messInfo);
                if (!result) {
                    return;
                }

                // alert(this.id);
                var urlpath = '/host'
                $.ajax({
                    url: urlpath,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'action': 'del',
                        'uuid': this.id
                    },
                    success: function (data) {
                        window.location.reload(true);
                    }

                });
            });

            $(".c_action_button_start").click(function (event) {
                // 点击启用按钮

                var messInfo = '是否启用( ' + this.name + ' )该主机？';
                var result = confirm(messInfo);
                if (!result) {
                    return;
                }

                var urlpath = '/host'
                $.ajax({
                    url: urlpath,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'action': 'start',
                        'uuid': this.id
                    },
                    success: function (data) {
                        window.location.reload(true);
                    }

                });
            });

            $(".c_action_button_stop").click(function (event) {
                // 点击禁用按钮

                var messInfo = '是否禁用( ' + this.name + ' )该主机？';
                var result = confirm(messInfo);
                if (!result) {
                    return;
                }

                // alert(this.id);
                var urlpath = '/host'
                $.ajax({
                    url: urlpath,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'action': 'stop',
                        'uuid': this.id
                    },
                    success: function (data) {
                        window.location.reload(true);
                    }

                });
            });

        });
    </script>

</head>
<body>

<div class="c_um_table">
    <table id="idTable" class="c_table">
        <tr class="c_table_head">
            <th class="c_ordinal">序号</th>
            <th class="c_name">名称</th>
            <th class="c_address">地址</th>
            <th class="c_desc">描述</th>
            <th class="c_addtimer">添加时间</th>
            <th class="c_status">状态</th>
            <th class="c_action">操作</th>
        </tr>
        {% for item in host_list %}
        <tr class="c_trList">
            <td class="c_td_class" style="display: none;">{{item.uuid}}</td>
            <td>{{item.count}}</td>
            <td><a href="/api/nodes/uuid-{{item.uuid}}" target="_blank">{{item.hostname}}</a></td>
            <td>{{item.hostaddr}}</td>
            <td>{{item.hostdesc}}</td>
            <td>{{item.addtimer}}</td>
            {%if item.status == '1'%}
            <td style="color: red;">离线</td>
            {%else%}
            <td style="color: green">在线</td>
            {%endif%}
            <td class="c_action_td">
                <input name={{item.hostname}} id={{item.uuid}} class="c_action_button_sty c_action_button_dele"
                       type="button" value="删除">

                {%if item.status == '0'%}
                <input name={{item.hostname}} id={{item.uuid}} class="c_action_button_sty c_action_button_stop"
                       type="button" value="禁用" style='display: none'>
                <input name={{item.hostname}} id={{item.uuid}} disabled
                       class="c_action_button_sty_disenabled c_action_button_start"
                       type="button" value="启用" style='display: none'>

                {%else%}
                <input name={{item.hostname}} id={{item.uuid}} disabled
                       class="c_action_button_sty_disenabled c_action_button_stop"
                       type="button" value="禁用" style='display: none'>
                <input name={{item.hostname}} id={{item.uuid}} class="c_action_button_sty c_action_button_start"
                       type="button" value="启用" style='display: none'>

                {%endif%}

            </td>
        </tr>
        {% endfor %}

    </table>

</div>


</body>
</html>